<template>
  <div class="auto_popupo">
    <el-dialog
            custom-class="auto_popup_time"
            :title="$t('configLazyLoad.channel.autoTip1')"
            :visible.sync="dialogShow"
            width="60%"
            :before-close="handleClose">
      <div class="remark" v-html="$t('configLazyLoad.channel.autoTip2')"></div>
      <!-- 平时上班时间 -->
      <div class="usually">
        <!-- 平时上班时间标题 -->
        <div class="title_head">
          {{$t('configLazyLoad.channel.autoTip3')}}
          <span class="remark">{{$t('configLazyLoad.channel.autoTip4')}}</span>
          <span class="text_right" v-if="dataObj.special === false" @click="dataObj.special = true">{{$t('configLazyLoad.channel.autoTip5')}}</span>
        </div>
        <!-- 平时上班时间表格 -->
        <div class="usually_table_box">
          <!-- 表格头部 -->
          <el-row class="box_head" :gutter="8">
            <el-col :span="12">
              <span style="margin-left: 10px">{{$t('channelsettings.schedule14')}}</span>
            </el-col>
            <el-col :span="9">
              <span>{{$t('configLazyLoad.channel.autoTip6')}}</span>
            </el-col>
            <el-col :span="3">
              <span>{{$t('public.operate')}}</span>
            </el-col>
          </el-row>
          <!-- 表格内容 -->
          <usuallyLi
                  v-for="(item, index) in dataObj.usuallyTime"
                  :random="random"
                  :curIndex="index"
                  :allArray="dataObj.usuallyTime"
                  :data="item.data"
                  :isEdit="item.isEdit"></usuallyLi>
        </div>
        <!-- 新增工作时间按钮 -->
        <div class="add_usually_time">
          <span class="add_btn" @click="addTimeItem('usually')"><i class="iconfont icon-zhankai"></i>{{$t('configLazyLoad.channel.autoTip7')}}</span>
        </div>
      </div>
      <!-- 特殊节假日 -->
      <div class="special" v-if="dataObj.special">
        <!-- 特殊节假日标题 -->
        <div class="title_head">
          {{$t('configLazyLoad.channel.autoTip8')}}
          <span class="remark">{{$t('configLazyLoad.channel.autoTip9')}}</span>
          <span class="text_right" v-if="dataObj.special === false" @click="dataObj.special = true">{{$t('configLazyLoad.channel.autoTip5')}}</span>
        </div>
        <!-- 特殊节假日表格 -->
        <div class="special_table_box" >
          <!-- 表格头部 -->
          <el-row class="box_head" :gutter="8">
            <el-col :span="5">
              <span style="margin-left: 10px">{{$t('customer.customerSlot.name')}}</span>
            </el-col>
            <el-col :span="8">
              <span>{{$t('config.customer.date')}}</span>
            </el-col>
            <el-col :span="8">
              <span>{{$t('configLazyLoad.channel.autoTip10')}}</span>
            </el-col>
            <el-col :span="3">
              <span>{{$t('public.operate')}}</span>
            </el-col>
          </el-row>
          <!-- 表格内容 -->
          <specialLi
                  v-for="(item, index) in dataObj.specialTime"
                  :curIndex="index"
                  :random="random"
                  :allArray="dataObj.specialTime"
                  :data="item.data"
                  :isEdit="item.isEdit"></specialLi>
        </div>
        <!-- 添加特殊节假日按钮 -->
        <div class="add_special_time">
          <span class="add_btn" @click="addTimeItem('special')"><i class="iconfont icon-zhankai"></i>{{$t('configLazyLoad.channel.autoTip11')}}</span>
        </div>
      </div>
    </el-dialog>
    <!-- 调用dialog的位置 -->
    <span class="setInviteStyle font12" @click="dialogShow = true">{{$t('configLazyLoad.channel.autoTip1')}}</span>
  </div>
</template>
<script>
  import bus from '@/store/eventBus'
  import usuallyLi from './addPopUsuallyTimeLi.vue'   //  平日上班时间组件
  import { deepClone } from '@utils/m7Utils.js'
  import specialLi from './addPopSpecialTimeLi.vue'   //  特殊节假日时间组件
  export default {
    name: 'autoPopupTimeSet',
    data () {
      return {
        dialogShow: false,            // dialog展示
        webchatData: {},                 //  网站的数据，保存自动弹出时间的时候用到
        random: 0,
        usuallyEdit: false,
        specialEdit: false,
        dataObj: {   //  继承的数据
          usuallyTime: [],            //  平日上班时间
          special: false,             //  是否开启了特殊节假日
          specialTime: []             //  特殊节假日
        }
      }
    },
    props: {
      inviteData: {         //  当前编辑的数据
        type: Object,
        default: function () {
          return {
            usuallyTime: [],
            special: false,
            specialTime: []
          }
        }
      },
      websiteId: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    watch: {
      websiteId: {
        handler: function (val) {
          this.dataObj = deepClone(this.inviteData)
          this.random = Math.random()
        },
        deep: true
      },
      dialogShow (cur, old) {
        if (cur) {
          this.dataObj = deepClone(this.inviteData)
          this.webchatData = {}
//          获取当前网站的数据，自动弹出时间需要点击保存按钮的时候就更新
          if (this.websiteId && this.websiteId !== 'undefined') {
            let data = {_id: this.websiteId}
            this.$store.dispatch('queryWebchatCfgById', data).then(res => {
              if (res && res.success) {
                let dataNew = deepClone(res.data)
                let cssStyle = deepClone(res.data.cssStyle)
                delete dataNew.account
                delete dataNew.createTime
                delete dataNew.PBX
                delete dataNew.updateTime
                delete dataNew.cssStyle
                let data = Object.assign({}, deepClone(dataNew), deepClone(cssStyle))
                this.webchatData = data
              }
            })
          }
        }
      }
    },
    methods: {
      addTimeItem (type) {        //  增加弹出时间段
        if (type === 'usually') {       //  平日上班时间段
          if (this.usuallyEdit) {
            this.$message.error(this.$t('configLazyLoad.channel.autoTip12'))
            return
          }
          this.dataObj.usuallyTime.push({
            data: {
              weekDayId: [],          //  星期的id【1,2,3】
              weekDayTitle: '',       //  表格中展示的文案
              workTime: [{start: '', end: ''}],   //  上班时间点
              weekTimeTitle: ''       //  上班时间点展示文案
            },
            isEdit: true             //  当前是否在编辑状态
          })
          this.usuallyEdit = true
        } else if (type === 'special') {    //  特殊节假日时间段
          if (this.specialEdit) {
            this.$message.error(this.$t('configLazyLoad.channel.autoTip12'))
            return
          }
          this.dataObj.specialTime.push({             //  特殊节假日数据
            data: {
              name: '',               //  名称
              date: [],               //  日期
              dateTitle: '',          //  日期展示文案
              workTime: [{start: '', end: ''}],   //  非上班时间点
              weekTimeTitle: ''       //  非上班时间点展示文案
            },
            isEdit: true             //  当前是否在编辑状态
          })
          this.specialEdit = true
        }
      },
      handleClose (done) {              //  关闭dialog框
        let flag = false
        this.dataObj.usuallyTime.forEach((item) => {    //  判断平日上班时间是否在编辑
          if (item.isEdit) {
            flag = true
          }
        })
        this.dataObj.specialTime.forEach((item) => {    //  判断特殊节假日时间是否在编辑
          if (item.isEdit) {
            flag = true
          }
        })
        if (!flag) {      //  如果没有编辑状态，关闭dialog
          if (!this.dataObj.specialTime.length) {
            this.dataObj.special = false
          }
          bus.$emit('autoInviteData', {data: this.dataObj})
          this.webchatData = {}
          done()
        } else {
          this.$message.error(this.$t('configLazyLoad.channel.autoTip12'))
        }
      }
    },
    components: {
      bus,
      usuallyLi,
      specialLi
    },
    mounted () {
//      bus事件监听
      let self = this
      bus.$on('changeIsEdit', (msg) => {      //  修改工作时间||特殊节假日
        if (msg.type === 'special') {
          this.$set(self.dataObj.specialTime[msg.index], 'isEdit', msg.data)
        } else {
          this.$set(self.dataObj.usuallyTime[msg.index], 'isEdit', msg.data)
        }
      })
      bus.$on('deleteLi', (msg) => {        //  删除工作时间||特殊节假日
        if (msg.type === 'special') {
          if (msg.todoType === 'add') {
            this.specialEdit = false
          }
          if (this.specialEdit) {
            this.$message.error(this.$t('configLazyLoad.channel.autoTip12'))
            return
          }
          self.dataObj.specialTime.splice(msg.index, 1)
        } else {
          if (msg.todoType === 'add') {
            this.usuallyEdit = false
          }
          if (this.usuallyEdit) {
            this.$message.error(this.$t('configLazyLoad.channel.autoTip12'))
            return
          }
          self.dataObj.usuallyTime.splice(msg.index, 1)
        }
        if (msg.todoType !== 'add') {
          self.$set(self.webchatData, 'autoInviteData', self.dataObj)
          if (this.websiteId) {
            this.$store.dispatch('webUpdateWebchatCfg', self.webchatData).then((res) => {
              if (res && res.success) {
                this.$message({
                  message: this.$t('monitor.deleteSuccess'),
                  type: 'success'
                })
              }
            })
          }
        }
        self.random = Math.random()
      })
      bus.$on('saveLi', (msg) => {        //  保存工作时间||特殊节假日
        if (msg.type === 'special') {
          self.$set(self.dataObj.specialTime[msg.index], 'data', msg.data)
          self.$set(self.dataObj.specialTime[msg.index], 'isEdit', false)
          self.specialEdit = false
        } else {
          self.$set(self.dataObj.usuallyTime[msg.index], 'data', msg.data)
          self.$set(self.dataObj.usuallyTime[msg.index], 'isEdit', false)
          self.usuallyEdit = false
        }
        self.$set(self.webchatData, 'autoInviteData', self.dataObj)
        if (self.websiteId) {
          self.$store.dispatch('webUpdateWebchatCfg', self.webchatData).then((res) => {
            if (res && res.success) {
              self.$message({
                message: this.$t('configLazyLoad.channel.autoTip13'),
                type: 'success'
              })
            }
          })
        }
        self.random = Math.random()
      })
    },
    beforeDestroy () {
      //      解除bus事件监听
      bus.$off('changeIsEdit')
      bus.$off('deleteLi')
      bus.$off('saveLi')
    },
    beforeMount () {
      this.dataObj = deepClone(this.inviteData)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .setInviteStyle
    color $c-main
    cursor pointer
  .remark
    color $c-prompt
    line-height: 20px;
  .usually_table_box,.special_table_box
    border 1px solid #e7e7eb
    box-sizing border-box
    overflow hidden
  .box_head
    background #f4f5f9
  .auto_popupo
    display inline-block
  .text_right
    color $cf-color1
    text-decoration underline
    float right
    cursor pointer

  .add_usually_time,.add_special_time
    color $cf-color1
    .add_btn,.add_btn
      cursor pointer
    .iconfont
      font-size 12px
      margin-right 6px
</style>
